import React, { useEffect, useState } from "react";
import { View, Text, Image, Button } from '@tarojs/components'
import Taro, { useDidShow } from "@tarojs/taro";
import { fetchPageConfigDetailForUser } from '@/server/shop';
import Router from '@/utils/router'
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
export const PersonalCenter = (props) => {
  const [userInfo, setUserInfo] = useState({})
  useDidShow(() => {
    const { organizationId } = Taro.getStorageSync('userInfo')
    setUserInfo(Taro.getStorageSync('userInfo'))

    if (organizationId) { fetchData() }
  })
  const [list, setList] = useState([{ "disabled": true, "key": "user", "label": "基本信息", "value": "user" }, { "label": "课程", "disabled": true, "key": "task", "value": "task" }, { "label": "订单", "value": "order", "key": "order" }, { "label": "工具", "value": "tools", "key": "tools" }])

  const fetchData = () => {
    fetchPageConfigDetailForUser({ pageType: 'user', }).then((e = {}) => {
      const { id, pageConfig = '{}' } = e
      if (id) {
        const config = JSON.parse(pageConfig)
        setList(config)
      } else {

      }
    })

  }
  const { profile, username, token, organizationId } = userInfo
  const reduceRouter = (fn) => {
    if (!organizationId) {
      Router('selectOrganization')
    }
    else {
      fn && fn()
    }
  }
  const render = {
    user: token ? <View onClick={() => reduceRouter(() => Router('information'))} className="PersonalCenter_banner_content">
      < View className="PersonalCenter_top_profile" >
        <Image className="PersonalCenter_top_image" src={profile} />
      </View >
      <View className="PersonalCenter_top_body">
        <View className="PersonalCenter_top_PersonalCentername">{username}</View>
      </View>
      <View onClick={(e) => {
        e.stopPropagation();
        Router('selectOrganization')
      }} className='update_Organization_info  at-icon at-icon-bullet-list'></View>
    </View > : <View onClick={() => reduceRouter(() => Router('login'))} className="PersonalCenter_banner_content">
      <View className="PersonalCenter_top_profile">
        <Image className="PersonalCenter_top_image" src={profile} />
      </View>
      <View className="PersonalCenter_top_body">
        <View className="PersonalCenter_top_PersonalCentername">{!organizationId ? '请选择机构' : '请登录'}</View>
      </View>
    </View>,
    task: <View className="PersonalCenter_tabs_label">
      <View className="PersonalCenter_c_box PersonalCenter_c_icon1" onClick={() => reduceRouter(() => Router('course', {
        args: { type: 'live' }
      }))}></View>
      <View className="PersonalCenter_c_box PersonalCenter_c_icon2" onClick={() => reduceRouter(() => Router('course', {
        args: { type: 'shop' }
      }))}></View>
      <View className="PersonalCenter_c_box PersonalCenter_c_icon3" onClick={() => Router('selectedCourses')}></View>
    </View>,
    order: <View className="PersonalCenter_tabs_box">
      <View className="PersonalCenter_tabs"
        onClick={() => reduceRouter(() => reduceRouter(() => Router('orderList')))}
      >
        <View className="PersonalCenter_label_icon1  PersonalCenter_label"></View>
        <View className="PersonalCenter_value">全部订单</View>
      </View>
      <View className="PersonalCenter_tabs"
        onClick={() => reduceRouter(() => Router('orderList', {
          args: { status: '0' }
        }))}
      >
        <View className="PersonalCenter_label_icon2  PersonalCenter_label"></View>
        <View className="PersonalCenter_value">待付款</View>
      </View>
      <View className="PersonalCenter_tabs"
        onClick={() => reduceRouter(() => Router('orderList', {
          args: { status: '1' }
        }))}
      >
        <View className="PersonalCenter_label_icon3  PersonalCenter_label"></View>
        <View className="PersonalCenter_value">已完成</View>
      </View>


      <View className="PersonalCenter_tabs
    " onClick={() => reduceRouter(() => Router('orderList', {
        args: { status: '2' }
      }))}
      >
        <View className="PersonalCenter_label_icon4  PersonalCenter_label"></View>
        <View className="PersonalCenter_value">已关闭</View>
      </View>
    </View>,
    tools: <View className="PersonalCenter_tool">
      <View onClick={() => { reduceRouter(() => Router('prizeList')) }} className="PersonalCenter_tool_list PersonalCenter_tool_gift" ><Text style={{ marginLeft: 8 }}>我的奖品</Text></View>
      <View onClick={() => { reduceRouter(() => Router('addressBookList')) }} className="PersonalCenter_tool_list PersonalCenter_tool_address" >


        <Text style={{ marginLeft: 8 }}>我的地址</Text></View>
    </View>
  }
  return <View className="PersonalCenter_box">

    {list.map(val => {
      const { key } = val
      if (key) {
        return render[key]
      }
      return null
    })}
  </View >
}
export default PersonalCenter